<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src=" https://cdn.jsdelivr.net/npm/echarts@5.2.0/dist/echarts.min.js" type="text/javascript"charset="utf-8"></script>
		<style type="text/css">
			#nav{
				width: 600px;
				height: 400px;
			}
		</style>
	</head>
	<body>
		<div id="nav">
			
		</div>
		<script type="text/javascript">
			var mCharts =  echarts.init(document.getElementById('nav'))
			//设置饼图的数据
			var pieData = [
				{
					name:'淘宝',
					value:11241
				},
				{
					name:'京东',
					value:22637
				},
				{
					name:'1号店',
					value:8989
				},
				{
					name:'聚美优品',
					value:6700
				},
				{
					name:'唯品会',
					value:6123
				}
			]
			var option = {
				series:[
					{
						type:'pie',
						data:pieData,
						label:{//饼图文字的显示
							show:true,//显示文字
							/* formatter:,//决定文字显示的内容 你写什么就显示什么 */
							formatter:function(arg){//显示数据的格式
								return arg.name+'平台'+arg.value+'元\n' + arg.percent+'%'
							}
						},
						/* radius://设置饼图的大小   设置半径 */
						/* radius:['50%','75%']//设置圆环效果 */
						roseType:'radius',//南丁格尔图  饼图的每一个区域的半径大小不一样 
						selectedMode:'single',//选中值的效果
						selectedOffset:30//选中偏移的距离
					}
				]
			}
			mCharts.setOption(option)
		</script>
	</body>
</html>
